<template>
  <div class="pay-course">
    <!-- 视频专区 -->
    <div v-if="videoList && videoList.length>0">
      <div class="item-list border-block" v-for="(item, index) in videoList" :key="index" @click="router({path: 'videoDetails', query: {id: item.id}})">
        <div class="img">
          <img :src="item.img">
          <div class="mask-bg"><img src="@/assets/liebiao.png" alt=""></div>
        </div>
        <div class="con">
           <p class="tip">{{item.title}}</p>
           <p class="video-num">
            <span class="time">
              <img src="@/assets/yunbangkechen4.png"> {{item.leng}}
            </span>
           </p>
        </div>
      </div>
    </div>
    <div v-else class="none">
      <img src="@/assets/kongzhuangtai.png" alt="">
    </div>
  </div>
</template>

<script>

import { getVideoById, baseUrl } from '@/api/api'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
export default {
  components: {
  },
  data () {
    return {
      videoList: [], //付费分类点播
    }
  },
  created () {
    this.id = this.$route.query.id
  },
  mounted () {
    this.mescroll = new MeScroll(this.$refs.mescroll, { 
      up: {
        callback: this.upCallback
      }
    })
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    // 热门推荐付费音频
    upCallback(page) {
      getVideoById(this.id, page.num, page.size).then((res) => {
        if (page.num == 1){
          this.videoList = []
        }
        if(res.data == null){
          this.mescroll.endErr()
          return
        }
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.info);
        })
        this.videoList = this.videoList.concat(res.data.info)
      }).catch((err) => {
        console.dir(err)
        this.mescroll.endErr()
      })
    }
    
  }
}
</script>
<style lang="stylus" scoped>
  .pay-course
    min-width 100vw
    min-height 100vh
    .item-list
      display flex
      padding 2rem 0
      margin 0 1.5rem
      border-bottom 1px solid #e6e6e6
      &:last-child
        border none
      .img
        width 12rem
        min-width 12rem
        max-width 12rem
        height 8rem
        border-radius .4rem
        overflow hidden
        position: relative
        margin-right 1.5rem
        .mask-bg
          position absolute
          width 100%
          height 100%
          background-color rgba(0,0,0,.4)
          top 0
          left 0
          img
            width 2.7rem
            height 2.7rem
            position absolute
            left 50%
            top 50%
            margin-left -1.35rem
            margin-top -1.35rem
        img
          width 100%
          height 100%
        span
          background-color rgba(0,0,0,.5)
          position absolute
          width 100%
          height 100%
          top 0px
          left 0px
          color #fff
          text-align center
          line-height 8rem
          font-size 1.5rem
      .con
        position relative
        flex 1
        .tip
          font-size 1.3rem
          line-height 2.4rem
          color #666
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        .video-num
          line-height 1.4rem
          font-size 1.2rem
          color #999
          position absolute
          bottom .3rem
        .time
          color #999
          font-size 1.2rem
          display flex
          min-width 50%
          img
            width 1.4rem
            height 1.4rem
            margin-right .8rem
    .none
      img
        width 15.4rem
        position absolute
        left 50%
        margin-left -7.7rem
        top 33%
</style>